<template>
    <div class="sc-icon-select">
		<div class="sc-icon-select__wrapper" :class="{'hasValue':value}" @click="open">
			<el-input :prefix-icon="value||'el-icon-plus'" v-model="value" :disabled="disabled" readonly></el-input>
		</div>
        <el-dialog :title="$t('scIconSelect.name')" v-model="dialogVisible" :width="760" destroy-on-close append-to-body>
			<div class="sc-icon-select__dialog" style="margin: -20px 0 -10px 0;">
				<el-form :rules="{}">
					<el-form-item prop="searchText">
						<el-input class="sc-icon-select__search-input" prefix-icon="el-icon-search" v-model="searchText" :placeholder="$t('common.search')" size="large" clearable/>
					</el-form-item>
				</el-form>
				<el-tabs>
					<el-tab-pane  v-for="item in data" :key="item.name" lazy>
						<template #label>
							{{item.name}} <el-tag size="small" type="info">{{item.icons.length}}</el-tag>
						</template>
						<div class="sc-icon-select__list">
							<el-scrollbar>
								<ul @click="selectIcon">
									<el-empty v-if="item.icons.length==0" :image-size="100" :description="$t('scIconSelect.noSearch')" />
									<li v-for="icon in item.icons" :key="icon">
										<span :data-icon="icon"></span>
										<el-icon><component :is="icon" /></el-icon>
									</li>
								</ul>
							</el-scrollbar>
						</div>
					</el-tab-pane>
				</el-tabs>
			</div>
			<template #footer>
				<el-button @click="clear" text>{{ $t('common.clear') }}</el-button>
				<el-button @click="dialogVisible=false">{{ $t('common.cancel') }}</el-button>
			</template>
		</el-dialog>
    </div>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue';
import config from "@/config/iconSelect";

// 定义组件的 props
const props = defineProps({
    modelValue: { type: String, default: "" },
    disabled: { type: Boolean, default: false },
});
// 定义可以发出的事件
const emit = defineEmits(['update:modelValue']);
// 定义响应数据
const value = ref('');
const dialogVisible = ref(false);
const data = ref([]);
const searchText = ref('');

// 监视 modelValue prop 的变化
watch(() => props.modelValue, (val) => {
    value.value = val;
});
// 监视 value 的变化
watch(() => value.value, (val) => {
    emit('update:modelValue', val);
});
// 监视 searchText 的变化
watch(() => searchText.value, (val) => {
    search(val);
});
// 组件挂载后时的逻辑
onMounted(() => {
    value.value = props.modelValue;
    data.value.push(...config.icons);
});
// 打开图标选择器
const open = () => {
    if (props.disabled) return false;
    dialogVisible.value = true;
};
// 选择图标
const selectIcon = (e) => {
    if (e.target.tagName != 'SPAN') {
        return false;
    }
    value.value = e.target.dataset.icon;
    dialogVisible.value = false;
};
// 清除图标
const clear = () => {
    value.value = '';
    dialogVisible.value = false;
};
// 图标选择器搜索
const search = (text) => {
    if (text) {
        const filterData = JSON.parse(JSON.stringify(config.icons));
        filterData.forEach(t => {
            t.icons = t.icons.filter(icon => icon.includes(text));
        });
        data.value = filterData;
    } else {
        data.value = JSON.parse(JSON.stringify(config.icons));
    }
};
</script>
<style scoped>
	.sc-icon-select {display: inline-flex;}
	.sc-icon-select__wrapper {cursor: pointer;display: inline-flex;}
	.sc-icon-select__wrapper:deep(.el-input__wrapper).is-focus {box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;}
	.sc-icon-select__wrapper:deep(.el-input__inner) {flex-grow:0;width: 0;}
	.sc-icon-select__wrapper:deep(.el-input__icon) {margin: 0;font-size: 16px;}
	.sc-icon-select__wrapper.hasValue:deep(.el-input__icon) {color: var(--el-text-color-regular);}
	.sc-icon-select__list {height:270px;overflow: auto;}
	.sc-icon-select__list li {display: inline-block;width:80px;height:80px;margin:5px;vertical-align: top;transition: all 0.1s;border-radius: 4px;position: relative;}
	.sc-icon-select__list li span {position: absolute;top:0;left:0;right:0;bottom:0;z-index: 1;cursor: pointer;}
	.sc-icon-select__list li i {display: inline-block;width: 100%;height:100%;font-size: 26px;color: #6d7882;display: flex;justify-content: center;align-items: center;border-radius: 4px;}
	.sc-icon-select__list li:hover {box-shadow: 0 0 1px 4px var(--el-color-primary);background: var(--el-color-primary-light-9);}
	.sc-icon-select__list li:hover i {color: var(--el-color-primary);}
</style>